<template>
  <div class="selectDiv">
    <input
      type="text"
      :placeholder="placeholder"
      class="selectDivInput"
      v-model="inputValue"
      :disabled="disabled"
    />
    <svg
      t="1647538513650"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3403"
      width="15"
      height="15"
      :class="[{ iconChange: selectVisable }]"
      @click="changeSelectVisable"
    >
      <path
        d="M904.533333 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 644.266667 179.2 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333l362.666666 362.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8l362.666666-362.666667c17.066667-17.066667 17.066667-42.666667 0-59.733333z"
        p-id="3404"
      ></path>
    </svg>
    <div class="selectDivList" v-show="selectVisable ? this.list : false">
      <ul>
        <li
          v-for="item in list"
          :key="item.value"
          @click="clickValue(item.label)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "a-select",
  data() {
    return {
      selectVisable: false,
      inputValue: "",
    };
  },
  props: {
    list: {
      type: Array,
      default:[
        { value:1,label:'吃饭'},
        { value:2,label:'睡觉'},
        { value:3,label:'洗澡'},
      ]
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    changeSelectVisable() {
      this.selectVisable = !this.selectVisable;
      // console.log(this.selectVisable);
    },
    clickValue(value) {
      // console.log(value);
      this.inputValue = value;
      this.selectVisable = !this.selectVisable;
      this.$emit("clickValue", value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./a-select.scss";
</style>